<html>
	<head>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.bundle.min.js"></script>
		<script src="./14092016-mysql-2.11.1.js"></script>
		<script src="./14092016-mysql2-1.0.0-rc12.js"></script>
		<script src="./14092016-mysql2-1.0.0-rc13.js"></script>

		<!-- script src="../results600s-mysql-8users.json"></script>
		<script src="../results600s-mysql2-8users-25x4pool.json"></script -->

		<script>
		$(document).ready(function(){
			const ctx = document.getElementById("myChart").getContext("2d");
			const chart = new Chart(ctx, {
			    type: 'line',
			    data: {
						datasets: []
			    },
			    options: {
			        scales: {
			            xAxes: [{
			                type: 'linear',
			                position: 'bottom'
			            }],
									yAxes: [{
											//type: "logarithmic",
											min: 0,
											max: 10000
									}]
			        }
			    }
			});

			$('#rateSelect').on('input change', function(ev) {
				const rate = Number(ev.target.value);
				setRate(rate);
			});

			setRate(3000);

			function setRate(rate) {
				let closestRes = null;
				//console.log(window.mysql1Data);
				//debugger;
				window.mysql1Data.forEach(function(bench) {
					if (!closestRes) {
						closestRes = bench;
					}
					if (Math.abs(Number(bench.opts.rate) - rate) < Math.abs(Number(closestRes.opts.rate) - rate)) {
						closestRes = bench;
					}
				});

				let closestRes1 = null;
				window.mysql2Data.forEach(function(bench) {
					if (!closestRes1) {
						closestRes1 = bench;
					}
					if (Math.abs(Number(bench.opts.rate) - rate) < Math.abs(Number(closestRes1.opts.rate) - rate)) {
						closestRes1 = bench;
					}
				});
				let closestRes2 = null;
				window.mysql2masterData.forEach(function(bench) {
					if (!closestRes2) {
						closestRes2 = bench;
					}
					if (Math.abs(Number(bench.opts.rate) - rate) < Math.abs(Number(closestRes2.opts.rate) - rate)) {
						closestRes2 = bench;
					}
				});

				chart.data.datasets = [

				{
					label: 'mysql ' + closestRes.opts.rate,
					fill: false,
					lineTension: 0.3,
					lineWidth: 0.1,
					pointBorderWidth: 0,
					pointRadius: 1,
					borderColor: "rgba(175,200,192,0.9)",
					borderWidth: 0.8,
					data: closestRes.result.histogram.map( (h) => { return { x: h.percentile, y: Math.min(h.latency, 15)} } )
				},
				{
					label: 'mysql2-1.0.0-rc12 ' + closestRes1.opts.rate,
					fill: false,
					lineTension: 0.3,
					lineWidth: 0.1,
					pointBorderWidth: 0,
					pointRadius: 1,
					borderColor: "rgba(175,100,92,0.9)",
					borderWidth: 0.8,
					data: closestRes1.result.histogram.map( (h) => { return { x: h.percentile, y:  Math.min(h.latency, 15)} } )
				},
				{
					label: 'mysql2-master ' + closestRes2.opts.rate,
					fill: false,
					lineTension: 0.3,
					lineWidth: 0.1,
					pointBorderWidth: 0,
					pointRadius: 1,
					borderColor: "rgba(175,10,92,0.9)",
					borderWidth: 0.8,
					data: closestRes2.result.histogram.map( (h) => { return { x: h.percentile, y:  Math.min(h.latency, 15)} } )
				}];
				//chart.data.datasets[0].data.push([{x: 1.001, y: 20000}])
				chart.update(true);
			}
		});
		</script>
	</head>
	<body style="display: flex; height: 100vh; margin: 0px; padding: 20px; flex-direction: column; box-sizing: border-box">
		<input id="rateSelect" type="range" id="weight" min="9000" value="9000" max="12000" step="200" style="width: 100%; margin: 10px">
		<canvas id="myChart"></canvas>
	</body>
</html>
